<template>
  <el-table-column
    v-bind="$attrs"
    :prop="item.prop"
    :label="item.label"
    :align="item.align || 'left'"
    :width="item.width || ''"
    :min-width="item.minWidth || ''"
    :show-overflow-tooltip="get_overHidden(item.overHidden)"
    :render-header="item.renderHeaderMethod || null"
    :fixed="item.fixed || false"
    :sortable="item.sortable || false"
    :class-name="item.fixed ? 'menu-float-right' : ''"
  >
    <template v-if="!item.children?.length" #default="scope">
      <slot
        v-if="item.slot"
        :name="item.slotName || scope.column.property || scope.column.prop"
        :row="scope.row"
        :column="scope.column || scope.column"
        :$index="scope.$index"
      />
      <!-- 需要时，通过在父组件给 tableOption 的项设置 type：'image' 来预览图片-单张 -->
      <el-image
        v-else-if="item.type === 'image'"
        fit="contain"
        :preview-src-list="[getUrl(scope.row[item.prop])]"
        class="img-box"
        :src="getUrl(scope.row[item.prop])"
      ></el-image>
      <!-- 需要时，通过在父组件给 tableOption 的项设置 type：'images' 来预览图片-多张 -->
      <template v-else-if="item.type === 'images'">
        <template
          v-if="
            typeof scope.row[item.prop] === 'object' &&
            scope.row[item.prop].length > 0
          "
        >
          <el-image
            fit="contain"
            v-for="(url, index) in scope.row[item.prop]"
            :key="index"
            :preview-src-list="getUrls(scope.row[item.prop])"
            class="img-box"
            :src="getUrl(url)"
          ></el-image>
        </template>
        <template v-else>
          <span>-</span>
        </template>
      </template>
      <!-- 需要时，通过在父组件给 tableOption 的项设置 formatter，用于对列中特殊格式的数据进行格式转换 -->
      <span
        v-else
        v-html="
          item.formatter
            ? item.formatter(scope.row[scope.column.property], scope.row)
            : scope.row[scope.column.property] === 0
            ? '0'
            : scope.row[scope.column.property] || '-'
        "
      ></span>
    </template>
    <template v-if="item.children.length">
      <TableColumn v-for="child in item.children" :item="child" />
    </template>
  </el-table-column>
</template>

<script setup>
import { toRefs } from "vue";
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const get_overHidden = (value) => {
  if (value === undefined || value === "" || value === true) {
    return true;
  }
  return false;
};

const { item } = toRefs(props);
</script>

<style lang="scss">

</style>
